import React, { useEffect, useState, useRef } from "react";
import { Table, Button, Modal, Switch, Select } from "antd";
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
import axios from "axios";
import { reqRegionList, reqRoleList } from "../../../api";
import UserForm from "../../../components/user-manage/UserForm"; //导入Form组件

const { confirm } = Modal;

export default function UserList() {
  const [dataSource, setDataSource] = useState([]); //服务器返回的数据
  const [isAddVisible, setIsAddVisible] = useState(false);
  //更新模态框的显示与隐藏
  const [UpdateState, setUpdateState] = useState(false);
  const [IsUpdateDisabled, setIsUpdateDisabled] = useState(false);
  const [roleList, setRoleList] = useState([]);
  const [regions, setRegion] = useState([]);
  const [current, setCurrent] = useState(null);
  const addForm = useRef(null);
  const UpdateForm = useRef(null);

  const { roleId, region, username } = JSON.parse(
    localStorage.getItem("token") //取出token
  );

  useEffect(() => {
    // 进行设置的映射对象。避免不知道1,2,3是什么
    const roleObj = {
      1: "superadmin",
      2: "admin",
      3: "editor",
    };
    axios.get("http://localhost:5000/users?_expand=role").then((res) => {
      const list = res.data;
      // 判断如果登陆的权限是超级管理员，就正常渲染，如果不是超级管理员只能看到自己和比自己区域小的编辑的那些项
      setDataSource(
        roleObj[roleId] === "superadmin"
          ? list
          : [
              //能看到自己和比自己区域小的编辑的那些项
              ...list.filter((item) => item.username === username),
              ...list.filter(
                (item) =>
                  item.region === region && roleObj[item.roleId] === "editor"
              ),
            ]
      );
    });
  }, [roleId, region, username]);
  useEffect(() => {
    reqRoleList().then((res) => {
      setRoleList(res.data);
      console.log(res.data);
    });
  }, []);
  useEffect(() => {
    reqRegionList().then((res) => {
      setRegion(res.data);
      console.log(res.data);
    });
  }, []);
  const columns = [
    {
      title: "区域",
      dataIndex: "region",
      //筛选项
      filters: [
        ...regions.map((item) => ({
          text: item.label || item.title,
          value: item.value,
        })),
        {
          text: "全球",
          value: "全球",
        },
      ],
      // filter回调函数
      onFilter: (value, item) => {
        // 如果是要筛选全球的
        if (value === "全球") {
          // 直接return  一个空的字符串就行
          return item.region === "";
        }
        //否则就直接return原来的
        return item.region === value;
      },
      render: (region) => {
        return <b>{region === "" ? "全球" : region}</b>;
      },
    },
    {
      title: "角色名称",
      dataIndex: "role",
      // 通过接口拿到相关联的角色名称
      render: (role) => {
        return role?.roleName;
      },
    },
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "用户状态",
      dataIndex: "roleState",
      // 样式状态的初始状态是判断roleState的布尔值结果。后台还有一个default属性来决定是否禁用
      render: (roleState, item) => {
        // hanldechangeState(item)传递item要去修改这一项的状态
        return (
          <Switch
            checked={roleState}
            disabled={item.default}
            onChange={() => hanldechangeState(item)}
          ></Switch>
        );
      },
    },
    {
      title: "操作",
      // render的参数item是点击的那一条对象
      render: (item) => {
        return (
          <div>
            {/* 加上antd的按钮属性 */}
            <Button
              danger
              type="primary"
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => confirmMytile(item)}
              disabled={item.default}
            />{" "}
            {/**删除按钮 */}
            {/* 给按钮添加一个点击事件，点击时状态的值给true，使得Modal对话框显示*/}
            <Button
              onClick={() => handleUpdate(item)}
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
              disabled={item.default}
            />
          </div>
        );
      },
    },
  ];
  //更新
  const handleUpdate = (item) => {
    // 打开模态框
    setUpdateState(true);
    // 点击时表单里的还么生成，所以放在一个异步里边
    setTimeout(() => {
      //把点击的这项item在传递回表单并展示出来 可以把这个值放在from表单中
      UpdateForm.current.setFieldsValue(item);
      //如果是超级管理员的话，传递给表单组件，来控制表单里区域的是否禁用状态
      if (item.roleId === 1) {
        console.log(1);
        // 禁用
        setIsUpdateDisabled(true);
      } else {
        // 取消禁用
        setIsUpdateDisabled(false);
      }
    }, 10);
    //把每次更新的item项保存到一个状态里，在确认更新的时候知道更新的是哪一项
    setCurrent(item);
  };
  // 修改点击ok时回调函数
  const addUpdateOk = () => {
    setUpdateState(false);
    UpdateForm.current.validateFields().then((value) => {
      console.log(value); //拿到更新以后的数据
      // 同步给页面的状态 这里不知道更新的是当前页面的哪一项，需要用一个状态来去保存下来
      setDataSource(
        dataSource.map((item) => {
          if (item.id === current.id) {
            return {
              ...item,
              ...value,
              role: roleList.filter((data) => data.id === value.roleId)[0],
            };
          }
          return item;
        })
      );
      //更新给后端
      axios.patch(`http://localhost:5000/users/${current.id}`, value);
    });
  };
  // 修改用户状态
  const hanldechangeState = (item) => {
    item.roleState = !item.roleState;
    setDataSource([...dataSource]); //同步给页面进行修改
    // 同步到后台axios.patch()局部更新，找到要更新的那一项id，覆盖原来的roleState
    axios.patch(`http://localhost:5000/users/${item.id}`, {
      roleState: item.roleState,
    });
  };

  // 删除事件的回调函数
  const confirmMytile = (item) => {
    confirm({
      title: "你确定删除嘛？",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteTitle(item);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  const addFormm = () => {
    addForm.current.validateFields().then((value) => {
      setIsAddVisible(false);
      // 重置一下
      addForm.current.resetFields();
      console.log(value);
      axios
        .post(`http://localhost:5000/users`, {
          //展开新添加的所有表单项的值，还有其他没有的属性，后端会自动添加自增的id
          ...value,
          roleState: true,
          default: false,
        })
        .then((res) => {
          console.log(res);
          // 把新数据放到状态里面
          setDataSource([
            ...dataSource,
            {
              ...res.data,
              role: roleList.filter((item) => item.id === value.roleId)[0],
            },
          ]);
        });
    });
  };
  const deleteTitle = (item) => {
    // console.log(item)
    setDataSource(dataSource.filter((data) => data.id !== item.id));
    // 同步给后端
    axios.delete(`http://localhost:5000/users/${item.id}`);
  };
  return (
    <div>
      <Button type="primary" onClick={() => setIsAddVisible(true)}>
        添加用户
      </Button>
      <Modal
        open={isAddVisible} //是否显示和隐藏  设置一个状态来进行切换
        title="添加用户" //标题
        okText="确定" //确定
        cancelText="取消" //取消
        onCancel={() => {
          setIsAddVisible(false);
        }} //
        onOk={() => {
          addFormm();
        }}
      >
        {/* 将状态传递给组件，然后通过props来接收，父传子 */}
        <UserForm region={regions} roleList={roleList} ref={addForm} />
      </Modal>
      {/* 编辑 */}
      <Modal
        destroyOnClose //销毁子组件 点取消时还会回来原来的状态
        open={UpdateState} //是否显示和隐藏  设置一个状态来进行切换
        title="更新用户" //标题
        okText="更新" //确定
        cancelText="取消" //取消
        onCancel={() => {
          setUpdateState(false);
        }} //
        onOk={() => {
          addUpdateOk();
        }}
      >
        {/* 将状态传递给组件，然后通过props来接收，父传子 */}
        <UserForm
          region={regions}
          roleList={roleList}
          ref={UpdateForm}
          IsUpdateDisabled={IsUpdateDisabled}
          isUpdate={true}
        />
      </Modal>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5,
        }}
        rowKey={(item) => item.id}
      ></Table>
    </div>
  );
}
